<template>
<!-- //组件的结构 -->
    <div>
        <!-- 
            配置项props
            功能: 让组件接收外部传过来的数据
                1.传递数据
                    <demo name="xxx">
                2.接收数据:
                        1. 第一种方式(只接收)
                            props:['name']
                        2. 第二种方式(限制类型)
                            props: {
                                name: String
                            }
                        3. 第三种方式(限制类型，限制必要性，指定默认值)
                            props: {
                                name: {
                                    type: String,
                                    required: true,
                                    default: 99
                                }
                            }
            备注: 
                    props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,
                    若业务确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据
         -->
        <h1>{{msg}}</h1>
        <h2>学生姓名:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <h2>学生年龄:{{age}}</h2>
        <button @click.stop="updateAge">点我修改年龄</button>
    </div>
</template>
<script>
// 组件交互相关的代码
export default {
    name: 'StuStudent',
    data () {
        return {
            msg:'213123',
            myAge: this.age
        }
    },
    methods: {
        updateAge () {
            this.myAge ++
        }
    },
    // props: ['name','age','sex'], 简单声明接收
    //接收的同时对数据进行限制
    // props: {
    //     name: String,
    //     age: Number,
    //     sex: String
    // }
    //接收的同时对数据进行限制+默认值的指定+必要性的限制
    props: {
        name: {
            type: String, //name类型是字符串
            required: true //名字是必要的
        },
        age: {
            type: Number, 
            default: 99 //默认值
        },
        sex: {
            type: String, //name类型是字符串
            required: true //名字是必要的
        },
    }
}
</script>
<style>
/* //组件的样式 */
    /* .demo {
        background-color: orange;
    } */
</style>